<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="flex searchbox">
      <view class="lable">常见问题</view>
      <view class="search">
        <van-search
          @search="getKnowledgelist('refresh')"
          clearable
          shape="round"
          @change="onChange"
          :value="pageModel.title"
          placeholder="请输入搜索关键词"
        />
      </view>
    </view>
    <!-- 搜索内容 -->
    <view class="flex searchResult">
      <!-- 左边侧边导航 -->
      <view class="nav" v-if="navList.length > 0">
        <view
          :class="[
            'nav_item',
            'rela',
            navIndex == index ? 'nav_item_active' : '',
          ]"
          v-for="(item, index) in navList"
          :key="index"
          @click="navClick(item, index)"
        >
          <view class="nav_item_lable overtxt">{{ item.categoryName }}</view>
          <view class="nav_item_icon abso" v-if="navIndex == index"></view>
        </view>
      </view>
      <!-- 右边内容列表 -->
      <view class="navContain">
        <!-- 列表 -->
        <view class="list">
          <view
            @click="toKnowledgeDetail(item)"
            class="list_item overtxt"
            v-if="list.length > 0"
            v-for="(item, index) in list"
            :key="index"
            >{{ item.title }}</view
          >
          <!-- 暂无数据 -->
          <van-empty v-if="list.length == 0" description="暂无知识" />
        </view>

        <!-- 按钮组 -->
        <view class="btns flexcen">
          <view class="btn">
            <image class="btn_icon"></image>
            <view class="btn_lable">新增</view>
          </view>
          <view class="btn" @click="toRecord">
            <image class="btn_icon"></image>
            <view class="btn_lable">记录</view>
          </view>
          <view class="btn">
            <image class="btn_icon"></image>
            <view class="btn_lable">二维码</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { categorylist, knowledgelist } from "@/common/api/knowledge";
export default {
  data() {
    return {
      navIndex: 0,
      navList: [],
      list: [],
      pageModel: {
        title: "",
        pageNum: 1,
        pageSize: 10,
        categoryId: "",
      },
    };
  },
  async onShow() {
    await this.getCategoryList();
    console.log(this.navList);
    if (this.navList.length > 0) {
      this.pageModel.categoryId = this.navList[this.navIndex].categoryId;
      this.getKnowledgelist("refresh");
    }
  },
  methods: {
    /* 输入 */
    onChange(e) {
      this.pageModel.title = e.detail;
    },
    /* 导航栏点击 */
    navClick(e, index) {
      this.navIndex = index;
      this.pageModel.categoryId = this.navList[this.navIndex].categoryId;
      this.getKnowledgelist("refresh");
    },
    /* 获取分类列表 */
    async getCategoryList() {
      try {
        uni.showLoading({ mask: true, title: "加载中" });
        let res = await categorylist();
        if (res.code == 200) {
          this.navList = res.rows;
        }
      } catch (error) {}
    },
    /* 获取知识点列表 */
    async getKnowledgelist(type) {
      try {
        if (type == "refresh") {
          uni.showLoading({
            mask: true,
            title: "加载中",
          });
        }
        this.pageModel.pageNum =
          type == "refresh" ? 1 : this.pageModel.pageNum + 1;
        let res = await knowledgelist(this.pageModel);
        if (res.code == 200) {
          this.list =
            type == "refresh" ? res.rows : [...this.list, ...res.rows];
        }
      } catch (error) {}
    },
    /* 查看知识详情记录 */
    toRecord() {
      uni.navigateTo({
        url: `/pages_knowledge/record?categoryId=${this.pageModel.categoryId}`,
      });
    },
    /* 查看知识详情 */
    toKnowledgeDetail(item) {
      uni.navigateTo({
        url: `/pages_knowledge/detail?knowledgeId=${item.knowledgeId}&status=detail`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  background: #fafafa;
}
.searchbox {
  width: 750rpx;
  height: 88rpx;
  background: #ffffff;
  .lable {
    padding: 0 32rpx 0 60rpx;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 88rpx;
  }
  //   搜索框！！！
  .search {
    width: 506rpx;
    ::v-deep .van-cell {
      height: 60rpx !important;
      line-height: 60rpx !important;
      padding: 8rpx 0 0 0 !important;
    }
    ::v-deep .van-search {
      width: 506rpx;
      padding: 14rpx 0 0 0 !important;
    }
    ::v-deep .van-search__content {
      height: 60rpx !important;
      line-height: 60rpx !important;
    }
  }
}
.searchResult {
  height: calc(100vh - 88rpx - 20rpx);
  .nav {
    width: 232rpx;
    background: #fafafa;
    height: 100%;
    overflow-y: scroll;
    .nav_item {
      @include btn_plain(#ffffff, #999999) {
        padding-left: 8rpx;
        box-sizing: border-box;
        width: 232rpx;
        height: 112rpx;
        background: #fafafa;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 112rpx;
        text-align: center;
      }
    }
    .nav_item_active {
      padding-left: 8rpx;
      box-sizing: border-box;
      background: #ffffff;
      color: #f85415;
      font-weight: 600;
      .nav_item_icon {
        left: 0;
        top: 16rpx;
        width: 8rpx;
        height: 80rpx;
        background: linear-gradient(180deg, #ff4d03 0%, #ff9a00 100%);
        border-radius: 4rpx;
      }
    }
  }
  .navContain {
    flex: 1;
    background: #ffffff;
    margin-top: 20rpx;
    height: calc(100vh - 88rpx - 20rpx);
    .list {
      box-sizing: border-box;
      padding-top: 16rpx;
      height: calc(100vh - 88rpx - 20rpx - 130rpx - 128rpx);
      overflow-y: scroll;
      .list_item {
        padding: 0 48rpx;
        line-height: 80rpx;
        height: 80rpx;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
    .btns {
      padding: 20rpx 0 110rpx 0;

      .btn:nth-of-type(1) {
        margin-left: 0 !important;
      }
      .btn {
        margin-left: 86rpx;
        width: 84rpx;
        .btn_icon {
          background: pink;
          margin: 20rpx 22rpx;
          width: 40rpx;
          height: 40rpx;
        }
        .btn_lable {
          margin-top: 28rpx;
          text-align: center;
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 40rpx;
        }
      }
    }
  }
}
</style>